<template>
	<view class="all">
		<view  class="box-bot">
			<view v-for="item in list" @click="onToList" class="bot-cell">
				<view class="bot-cell-left">
					<view class="cell-left-one">
						{{item.playName}}  ({{item.prop2 == 0? '男' : '女'}}  {{item.prop1}}岁）
					</view>
					<view class="cell-left-one2">
						{{item.mobile}}
					</view>
					<view class="cell-left-two">
						{{item.idCard}}
					</view>
					<view class="cell-left-three">
						{{item.address}}
					</view>
				</view>
				<view class="bot-cell-right">
					<img @click="toEdit(item)" src="../../static/editIcon.png" alt="">
					<view @click="onDel(item)" class="del">
						删除
					</view>
				</view>
			</view>
		</view>
		
		<view class="kong">
			
		</view>
		<view @click="onToAdd" class="btns">
			<!-- <view class="btn-l">
				实付金额: 
				<view class="money">
					￥233
				</view>
			</view> -->
			<view class="btn-r">
				新 增
			</view>
		</view>
		<u-modal :show="show" title="提示" @cancel="show=false" showCancelButton  @confirm="confirm"  :closeOnClickOverlay="true" content='确定要删除该选手吗？'></u-modal>
	</view>
</template>

<script>
	import { playerList, playerDel  } from './indexServ.js'
	export default {
		name: 'template',
		data() {
			return{
				list: [],
				show: false,
				id: ''
			}
		},
		onShow() {
			this.GET_playerList()
		},
		methods: {
			async GET_playerList() {
				let res = await playerList({
					openid: uni.getStorageSync('openid'),
				})
				if(res.code == 200) {
					this.list = res.data
				}
			},
			async GET_playerDel(p) {
				
				let res = await playerDel(p)
				if(res.code == 200) {
					this.show = false
					this.GET_playerList()
					uni.showToast({
						title: '删除成功'
					})
				}
			},
			
			onDel(it) {
				this.id = it.id
				this.show = true
			},
			onToAdd() {
				uni.navigateTo({
					url: `/pages/addPlay/index`,
					fail: error => {
						console.log('error；', error)
					}
				})
			},
			toEdit(it) {
				uni.navigateTo({
					url: `/pages/addPlay/index?id=${it.id}`,
					fail: error => {
						console.log('error；', error)
					}
				})
			},
			confirm() {
				this.GET_playerDel({id: this.id})
			},
			
			onToList() {
				// uni.navigateTo({
				// 	url: `/pages/submitOrder/index`,
				// 	fail: error => {
				// 		console.log('error；', error)
				// 	}
				// })
			}
		}
	}
</script>

<style  lang="scss" scoped>
.kong{
	width: 100%;
	height: 120rpx;
}
.all{
	width: 100%;
	
	.box-bot{
		padding: 20rpx;
		width: 100%;
		box-sizing: border-box;
		.bot-cell{
			width: 100%;
			// height: 100rpx;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			background: #fff;
			font-size: 32rpx;
			padding: 20rpx;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			justify-content: space-between;
			// margin-bottom: 20rpx;
			.bot-cell-left{
				flex: 1;
				display: flex;
				flex-direction: column;
				.cell-left-one{
					color: #333;
					font-size: 34rpx;
					margin-bottom: 20rpx;
				}
				.cell-left-one2{
					color: #333;
					font-size: 32rpx;
					margin-bottom: 20rpx;
				}
				.cell-left-two{
					color: #757575;
					font-size: 30rpx;
					margin-bottom: 20rpx;
				}
				.cell-left-three{
					color: #757575;
					font-size: 28rpx;
					// margin-bottom: 20rpx;
				}
			}
			.bot-cell-right{
				width: 100rpx;
				// background: pink;
				display: flex;
				flex-direction: column;
				align-items: center;
				img{
					width: 60rpx;
					height: 60rpx;
					margin-bottom: 50rpx;
				}
				.del{
					color: #bfbfbf;
					font-size: 34rpx;
				}
			}
		}
	}
}

	.btns{
		width: 100%;
		height: 100rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		background: #1a8dff;
		display: flex;
		.btn-l{
			height: 100rpx;
			flex: 1;
			border-right: 2rpx solid #e1e1e1;
			border-top: 2rpx solid #e1e1e1;
			display: flex;
			align-items: center;
			padding-left: 30rpx;
			box-sizing: border-box;
			color: #888888;
			font-size: 30rpx;
			.money{
				color: #e94f4f;
			}
		}
		.btn-r{
			width: 100%;
			height: 100rpx;
			background: $u-primary;
			border-top: 2rpx solid $u-primary;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 32rpx;
		}
	}
</style>